$(function(){
    fetch(`http://chst.vip:1234/api/getgsproduct?shopid=0&areaid=0`)
    .then(body=>body.json())
    .then(res=>{
        let txt = ''
        res.result.forEach(item => {
            txt += `<li>
                       <img src=${item.productImg}>
                       <p>${item.productName}</p>
                       <p>${item.productPrice}</p>
                    </li>`
        })
        $('.list ul').html(txt)
    })
    $('.shop div').click(function(){
        console.log($(this).find('li'))
        $('.area').find('li').slideUp()
        $(this).parent().find('li').slideToggle(function(){
            fetch(`http://chst.vip:1234/api/getgsshop`)
            .then(body=>body.json())
            .then(res=>{
                let txt = ''
                res.result.forEach(item => {
                    txt += `<p shopId='${item.shopId}' shopName='${item.shopName}'>
                            ${item.shopName}
                            </p>`
                })
                $('.shop li').html(txt)
                $('.shop li p').click(function(){
                    $(this).parent().slideUp()
                    let shopid = $(this).attr('shopId')
                    let shopName = $(this).attr('shopName')
                    let areaid = $('.area div p').attr('areaid')
                    let p = `<p shopid='${shopid}'>${shopName}</p>
                    <img src="../assets/iconFonts/下箭头.png" alt="">`
                    $('.shop div').html(p)
                    console.log(shopName)
                    console.log(shopid)
                    console.log(areaid)
                    fetch(`http://chst.vip:1234/api/getgsproduct?shopid=${shopid}&areaid=${areaid}`)
                    .then(body=>body.json())
                    .then(res=>{
                        
                        let txt = ''
                        res.result.forEach(item => {
                            txt += `<li>
                                    <img src=${item.productImg}>
                                    <p>${item.productName}</p>
                                    <p>${item.productPrice}</p>
                                    </li>`
                        })
                        $('.list ul').html(txt)
                    })
                })
            })
        }) 
    })
    $('.area div').click(function(){
        console.log($(this).find('li'))
        $('.shop').find('li').slideUp()
        $(this).parent().find('li').slideToggle(function(){
            fetch(`http://chst.vip:1234/api/getgsshoparea`)
            .then(body=>body.json())
            .then(res=>{
                let txt = ''
                res.result.forEach(item => {
                    txt += `<p areaId='${item.areaId}' areaName='${item.areaName}'>
                            ${item.areaName}
                            </p>`
                })
                $('.area li').html(txt)
                $('.area li p').click(function(){
                    $(this).parent().slideUp()
                    let areaid = $(this).attr('areaId')
                    let areaName = $(this).attr('areaName')
                    let shopid = $('.shop div p').attr('shopid')
                    let p = `<p areaid='${areaid}'>${areaName}</p>
                    <img src="../assets/iconFonts/下箭头.png" alt="">`
                    $('.area div').html(p)
                    console.log(areaName)
                    console.log(areaid)
                    console.log(shopid)
                    fetch(`http://chst.vip:1234/api/getgsproduct?shopid=${shopid}&areaid=${areaid}`)
                    .then(body=>body.json())
                    .then(res=>{
                        let txt = ''
                        res.result.forEach(item => {
                            txt += `<li>
                                    <img src=${item.productImg}>
                                    <p>${item.productName}</p>
                                    <p>${item.productPrice}</p>
                                    </li>`
                        })
                        $('.list ul').html(txt)
                    })
                })
            })
        })  
    })
    $('.header_logo').click(function(){
        location.href = '../index.html'
    })
})